<template>
  <view class="">
    <!-- <uni-nav-bar height="175rpx" @clickLeft="ui.back()" title="首页" :border='false' /> -->
    <view class="content">
      <z-paging ref="paging" v-model="dataList" @query="queryList">
        <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
        <!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
        <template #top>
           <uni-nav-bar height="175rpx" @clickLeft="ui.back()" title="首页" :border='false' />
          <view class="head">
            <view class="view">
              <view class="left">
                我的佣金：¥9999.00
              </view>
              <view class="right">
                <view class="botton" @click="openPage()">
                  提现
                </view>
              </view>
            </view>
          </view>
          <view class="menu">
            <view class="view">
              <view class="icon">
                <image src="../static/index/tuanduiguanli.png" mode=""></image>
              </view>
              <view class="text">
                团队管理
              </view>
            </view>
            <view class="view">
              <view class="icon">
                <image src="../static/index/kehuguanli.png" mode=""></image>
              </view>
              <view class="text">
                客户管理
              </view>
            </view>
            <view class="view">
              <view class="icon">
                <image src="../static/index/shejiyuyue.png" mode=""></image>
              </view>
              <view class="text">
                设计预约
              </view>
            </view>
            <view class="view">
              <view class="icon">
                <image src="../static/index/shejifangan.png" mode=""></image>
              </view>
              <view class="text">
                设计方案
              </view>
            </view>
            <view class="view">
              <view class="icon">
                <image src="../static/index/yongjinguanli.png" mode=""></image>
              </view>
              <view class="text">
                佣金管理
              </view>
            </view>
            <view class="view">
              <view class="icon">
                <image src="../static/index/jingxuansheji.png" mode=""></image>
              </view>
              <view class="text">
                精选设计
              </view>
            </view>
            <view class="view">
              <view class="icon">
                <image src="../static/index/yuyuesheji.png" mode=""></image>
              </view>
              <view class="text">
                预约设计
              </view>
            </view>
          </view>
          <view class="list">
            <view class="title">
              当前排队客户
            </view>
          </view>
        </template>
        <view class="list">
          <view class="box">
            <view class="view">
              <view class="top">
                <view class="name">
                  001号进场
                </view>
                <view class="time">
                  刚刚
                </view>
              </view>
              <view class="bottom">
                <view class="icon">
                  <view class="img">
                    <image src="../static/index/kehuguanli.png" mode=""></image>
                  </view>
                  <view class="name">
                    刘先生
                  </view>
                </view>
                <view class="right">
                  <view class="call">
                    正在叫号
                  </view>
                  <view class="info">
                    详情
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
  const dataList = ref([])
  const form = reactive({
    pageNo: 1,
    pageSize: 10,
    username: ''
  })
  const paging = ref(null)
  const queryList = (pageNo, pageSize) => {
    form.pageNo = pageNo
    // 此处请求仅为演示，请替换为自己项目中的请求
    // getUserList(form).then(res => {
    // if (res.code == 0) {
    dataList.value = dataList.value.concat([])
    // total.value = res.result.total
    paging.value.complete([]);
    // }
    // })
  }
  // 跳转页面
  const openPage = () => {
    uni.navigateTo({
      url: '/pagesUser/kickback/moneywithdraw'
    })
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;

    .head {
      border: 1rpx solid #EEEEEE;
      border-radius: 10rpx;
      background-color: rgb(0, 117, 255);
      padding: 25rpx;
      // padding-top: 175rpx;
      .view {
        display: flex;

        .left {
          width: 400rpx;
          height: 50rpx;
          line-height: 50rpx;
          // border: 1rpx solid red;
          color: #fff;
        }

        .right {
          width: 300rpx;
          // border: 1rpx solid green;
          display: flex;
          justify-content: flex-end;

          .botton {
            width: 200rpx;
            height: 50rpx;
            border-radius: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 50rpx;
            background-color: #fff;
            color: #000;
            font-weight: 700;
          }
        }
      }
    }

    .menu {
      width: 750rpx;
      padding: 25rpx;
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      // border: 1rpx solid red;
      background-color: #fff;
      border-bottom-left-radius: 10rpx;
      border-bottom-right-radius: 10rpx;

      .view {
        flex: none;
        width: 150rpx;
        height: 200rpx;
        // border: 1rpx solid red;
        // background-color: ;
        margin: 0 12.5rpx;
        margin-top: 10rpx;

        .icon {
          width: 150rpx;
          height: 150rpx;
          border-radius: 150rpx;
          border: 1rpx solid rgb(207, 232, 252);
          display: flex;
          justify-content: center;
          align-items: center;

          image {
            width: 60%;
            height: 60%;
          }
        }

        .text {
          width: 150rpx;
          height: 50rpx;
          line-height: 50rpx;
          display: flex;
          justify-content: center;
          font-weight: 700;
        }
      }
    }

    .list {
      width: 100%;
      margin-top: 20rpx;
      background-color: #fff;

      .title {
        width: 100%;
        height: 100rpx;
        padding-left: 12.5rpx;
        display: flex;
        align-items: center;
        font-weight: 700;
      }

      .box {
        padding: 12.5rpx;
        border: 1rpx solid #EEEEEE;
        border-radius: 5rpx;

        .top {
          display: flex;
          justify-content: space-between;

          .name {
            color: #000;
            font-size: 32rpx;
            // font-weight: 500;
          }

          .time {
            color: grey;
          }
        }

        .bottom {
          display: flex;
          margin-top: 20rpx;
          justify-content: space-between;
          padding-bottom: 15rpx;
          border-bottom: 2rpx solid #EEEEEE;

          .icon {
            display: flex;
            justify-content: space-between;

            .img {
              width: 40rpx;
              height: 40rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .name {
              color: gray;
            }
          }

          .right {
            display: flex;
            // border: 1rpx solid red;
            padding: 0;

            .call {
              background-color: rgb(0, 117, 255);
              height: 50rpx;
              display: flex;
              align-items: center;
              padding: 0 30rpx;
              border-radius: 10rpx;
              color: #fff;
            }

            .info {
              background-color: rgb(0, 117, 255);
              height: 50rpx;
              display: flex;
              align-items: center;
              padding: 0 30rpx;
              margin-left: 10rpx;
              border-radius: 10rpx;
              color: #fff;
            }
          }

        }
      }
    }
  }
</style>